<template>
  <div class="app-container">
    <canvas id="qrCanvas01" :width="ewmWidth" :height="ewmHeight"></canvas>
  </div>
</template>
<script setup name="">
  import { reactive, toRefs, ref, getCurrentInstance, nextTick, watch } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const { proxy } = getCurrentInstance()

  const props = defineProps({
    rowData: {
      type: Object,
      default: () => ({}),
    },
    ewmWidth: {
      type: Number,
      default: 300,
    },
    ewmHeight: {
      type: Number,
      default: 330,
    },
    imgUrl: {
      type: String,
      default: '',
    },
    title: {
      type: String,
      default: '',
    },
  })

  // ---------------------------- 二维码码牌预览 ----------------------------
  // const imgUrl = ref('')
  // const storeName = ref('')
  const viewMpImg = async (record) => {
    nextTick(() => {
      makeCanvas()
    })
  }
  const makeCanvas = () => {
    // 直接执行 canvas 操作，不等待 DOMContentLoaded 事件
    const canvas = document.getElementById('qrCanvas01')
    const ctx = canvas.getContext('2d')

    // 绘制红色背景
    ctx.fillStyle = '#B81614'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 二维码相关配置和绘制
    const qrSize = 200 // Size of the QR code within the canvas
    const qrMargin = 50
    const qrImage = new Image()
    qrImage.src = props.imgUrl //qrCode.createDataURL(4) // Scale factor for QR code image

    qrImage.onload = function () {
      // 绘制白色方块和二维码
      ctx.fillStyle = 'white'
      ctx.fillRect(qrMargin, qrMargin, qrSize, qrSize) // White square to contain QR code
      ctx.drawImage(qrImage, qrMargin, qrMargin, qrSize, qrSize)

      // 绘制四个角的装饰线条
      drawCornerLs(ctx, 40, 40, qrSize + 20, qrSize + 20, 20)

      // 添加门店文本信息
      ctx.fillStyle = '#fff'
      ctx.font = 'bold 16px Arial'
      ctx.textAlign = 'center'
      ctx.fillText(props.title, canvas.width / 2, canvas.height - 30)
    }

    /**
     * 绘制四个角的L形（开口朝中间）
     * @param {CanvasRenderingContext2D} ctx - Canvas绘图上下文
     * @param {number} x - 容器左上角x坐标
     * @param {number} y - 容器左上角y坐标
     * @param {number} width - 容器宽度
     * @param {number} height - 容器高度
     * @param {number} length - L形每条边的长度（向中间延伸的距离）
     * @param {string} [color='#fff'] - 线段颜色（默认白色）
     * @param {number} [lineWidth=3] - 线段宽度（默认3像素）
     */
    function drawCornerLs(ctx, x, y, width, height, length, color = '#fff', lineWidth = 3) {
      // 配置绘图样式（线帽设为'square'让L形角更整齐）
      ctx.strokeStyle = color
      ctx.lineWidth = lineWidth
      ctx.lineCap = 'square'

      // ---- 1. 左上角L形（上边+左边，开口向右下）----
      ctx.beginPath()
      ctx.moveTo(x, y) // 起点：左上角顶点
      ctx.lineTo(x + length, y) // 上边：向右延伸length
      ctx.moveTo(x, y) // 回到起点
      ctx.lineTo(x, y + length) // 左边：向下延伸length
      ctx.stroke()

      // ---- 2. 右上角L形（上边+右边，开口向左下）----
      ctx.beginPath()
      ctx.moveTo(x + width, y) // 起点：右上角顶点
      ctx.lineTo(x + width - length, y) // 上边：向左延伸length
      ctx.moveTo(x + width, y) // 回到起点
      ctx.lineTo(x + width, y + length) // 右边：向下延伸length
      ctx.stroke()

      // ---- 3. 右下角L形（右边+下边，开口向左上）----
      ctx.beginPath()
      ctx.moveTo(x + width, y + height) // 起点：右下角顶点
      ctx.lineTo(x + width, y + height - length) // 右边：向上延伸length
      ctx.moveTo(x + width, y + height) // 回到起点
      ctx.lineTo(x + width - length, y + height) // 下边：向左延伸length
      ctx.stroke()

      // ---- 4. 左下角L形（下边+左边，开口向右上）----
      ctx.beginPath()
      ctx.moveTo(x, y + height) // 起点：左下角顶点
      ctx.lineTo(x + length, y + height) // 下边：向右延伸length
      ctx.moveTo(x, y + height) // 回到起点
      ctx.lineTo(x, y + height - length) // 左边：向上延伸length
      ctx.stroke()
    }
  }
  watch(
    () => props.imgUrl,
    () => {
      viewMpImg()
    },
    { immediate: true },
  )
</script>
<style lang="scss" scoped></style>
